<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>我要表白</title>
     {css href="/public/love/css/mui.min.css" /}
    {css href="/public/love/css/iconfont.css" /}
    <style>
        html,
body {
  font-size: 19px;
  font-family: 'Verdana', 'Arial';
  color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  /*overflow-x: hidden;
    overflow-y: auto;*/
  border-radius: 2px;
  z-index: 100;
  /* padding: 10px;*/
  box-sizing: border-box;
  /*不会把盒子撑开*/
}

.mui-bar {
  z-index: 101;
}

.content::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  /*-1 可以当背景*/
  -webkit-filter: blur(1px);
  filter: blur(1px);
  margin: -30px;
  /*消除边缘透明*/
  background: url(/public/love/images/love.jpg) center no-repeat;
  background-size: 50%;
  /*平铺*/
  background-attachment: fixed;
  /*位置固定*/
  background-color: #fff;
}

.box {
  width: 100%;
  height: 100%;
  padding-bottom: 15px;
  overflow-y: auto;
}

.mui-input-row label,
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
  color: #666;
}

.mui-checkbox {
  position: relative;
  line-height: 50px;
  margin: 0;
  padding-left: 15px;
}

.mui-checkbox:after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: '';
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  background-color: #c8c7cc;
}

.mui-checkbox input {
  margin-top: 6px;
}

.mui-checkbox input[type=checkbox]:checked:before,
.mui-radio input[type=radio]:checked:before {
  color: #4CCBD9;
}

.change-btn {
  margin-left: 15px;
  padding: 5px 15px;
}

.mui-input-row {
  height: auto!important;
  padding: 10px 0;
}

.mui-input-row label,
.mui-input-row label~input,
.mui-input-row label,
.mui-input-row label~textarea {
  font-size: 15px;
}

.mui-input-group {
  /* height: 100%;*/
  padding: 0 10px;
  background-color: rgba(255, 255, 255, .6);
}

.mui-input-row label {
  width: 40%;
}

.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
  width: 60%;
  line-height: 15px;
}

.mui-input-group:before {
  background-color: transparent;
}

.mui-input-group .mui-input-row:after {
  left: 0;
}

.ok-title p {
  height: 60px;
  line-height: 60px;
  margin: 0;
  padding: 0 15px;
  color: #444;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
}

.ok-title p input {
  vertical-align: -2px;
}

.mui-input-group:after {
  background-color: transparent;
}

.love-btn {
  margin: 0;
  padding: 14px 0;
  border-radius: 0px;
  color: #fff;
  border: 1px solid red;
  background-color: red;
}

.mui-bar a {
  color: #fa989d;
}

.service-price {
  height: 60px;
  line-height: 60px;
  padding-left: 15px;
  font-size: 15px;
  color: #666;
}

.service-price span {
  color: orangered;
}

.service-price span i {
  font-style: normal;
}


    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">对TA表白</h1>
    </header>
    <div class="mui-content content">
        <div class="box">
            <div class="mui-input-group">
                <div class="mui-input-row">
                    <label>TA的姓名：</label>
                    <input type="text" placeholder="TA的姓名" name="toname" id="toname">
                </div>
                <div class="mui-input-row">
                    <label>TA的学号：</label>
                    <input type="number" placeholder="填写学号会发送匹配通知Ta哟" name="jwid" id="jwid">
                </div>
                <div class="mui-input-row" style="border-bottom: none;">
                    <label>表白内容：</label>
                    <textarea rows="5" placeholder="想对TA说的话" name="content" id="content"></textarea>
                    
                </div>
                <p class="mui-checkbox">
                    <label>
                    <input id = "is_send" name="is_send" value="1" type="checkbox" >
                    是否消息通知对方(推荐)
                </label>
                </p>
                </p>
                <p class="mui-checkbox">
                    <label>
                    <input name="is_receive" id="is_receive" value="1" type="checkbox" >
                    当TA留下表白信息时接收通知(推荐)
                </label>
                </p>
                <p class="mui-checkbox">
                    <label>
                    <input name="is_hide" id="is_hide"  value="0" type="checkbox" >
                   匿名表白(默认实名表白)
                </label>
                </p>
                <p style="color: red;">注:只有绑定学号才可以发布暗恋表白哟</p>
                    {if condition = "$isBind.name eq ''"}
                      <button  style="border-radius:20px" class="mui-btn-block mui-btn mui-btn-danger love-btn" data-loading-text="请稍后..." onclick="bind();">绑定学号</button>
                    {else/}
                      <button id="button" style="border-radius:20px" class="mui-btn-block mui-btn mui-btn-danger love-btn" data-loading-text="请稍后..." onclick="publishLove()">表白</button>
                    {/if}
                    
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>

    function bind() {
      window.location.href = 'http://cd.cdhand.com/public/index.php/index/bind/index';
    }

    function publishLove() {

        if($('#is_hide').is(':checked')) {
            var is_hide = 1;
        }else{
            var is_hide = 0;
        }

        if($('#is_receive').is(':checked')) {
            var is_receive = 1;
        }else{
            var is_receive = 0;
        }

        if($('#is_send').is(':checked')) {
            var is_send = 1;
        }else{
            var is_send = 0;
        }

        var toname = $("#toname").val();
        if(toname == '' || toname == null){

            alert('姓名不能为空哟');
            return false;
        }
        var jwid = $("#jwid").val();
        var content = $("#content").val();
        if(content == '' || content == null){

            alert('对TA说点什么吧');
            return false;
        }
        $("#button").attr("disabled", true);
        $("#button").text('匹配中....');
        $.ajax({
            type: 'POST',
            url: '{:url('sendlove')}',
            data: {
                
                is_hide:is_hide,
                is_receive:is_receive,
                is_send:is_send,
                toname:toname,
                content:content,
                jwid:jwid
            },
            success: function(result){

                if(result.status == 1){
                    alert(result.msg);
                    setTimeout(function(){
                      window.location.href = 'http://cd.cdhand.com/public/index.php/index/love/index'
                    }, 1000 );
                    $("#button").attr("disabled", false);
                    $("#button").text('表白');
                }else{
                    alert(result.msg);
                    $("#button").attr("disabled", false);
                    $("#button").text('表白');
                }
            },
            error: function(xhr, type){
                alert('系统错误');
                // 即使加载出错，也得重置
            }
        });
        
    }
</script>
</html>